<template>
  <div class="body">
    <!-- 搜索框 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名:" prop="userName" label-width="120px">
        <el-input v-model="queryParams.userName" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column type="index" label="序号" width="120" :index="indexMethod">
      </el-table-column>



      <el-table-column prop="userName" label="登陆名" width="120">
      </el-table-column>

      <el-table-column prop="nickName" label="姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="deptId" label="所属部门" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total=total>
      </el-pagination>
    </div>
    <!-- 单选框 -->
    <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">

      <el-form-item label="测试类型" prop="resource">
        <el-radio-group v-model="ruleForm.testType">
          <el-radio label="日常检测"></el-radio>
          <el-radio label="普测"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="重测" prop="resource1">
        <el-radio-group v-model="ruleForm.retest">
          <el-radio label="不可重测"></el-radio>
          <el-radio label="可重测"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否发送通知" prop="resource2">
        <el-radio-group v-model="ruleForm.notification">
          <el-radio label="否"></el-radio>
          <el-radio label="是"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否可查看报告" prop="resource3">
        <el-radio-group v-model="ruleForm.report">
          <el-radio label="否"></el-radio>
          <el-radio label="是"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否设置作答时间" prop="resource4">
        <el-radio-group v-model="ruleForm.answerTime">
          <el-radio label="否"></el-radio>
          <el-radio label="是"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">分配</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form> -->

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="测试类型" prop="testType">
        <el-radio-group v-model="ruleForm.testType">
          <el-radio label="日常检测"></el-radio>
          <el-radio label="普测"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="重测" prop="retest">
        <el-radio-group v-model="ruleForm.retest">
          <el-radio label="不可重测"></el-radio>
          <el-radio label="可重测"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否发送通知" prop="notification">
        <el-radio-group v-model="ruleForm.notification">
          <el-radio label="否"></el-radio>
          <el-radio label="是"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否可查看报告" prop="report">
        <el-radio-group v-model="ruleForm.report">
          <el-radio label="否"></el-radio>
          <el-radio label="是"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否设置作答时间" prop="answerTime">
        <el-radio-group v-model="ruleForm.answerTime">
          <el-radio label="否"></el-radio>
          <el-radio label="是"></el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">

      <!-- <div class="block">
        <span class="demonstration">开始时间</span>
        <div class="demonstration">值：{{ value1 }}</div>
        <el-date-picker v-model="value1" type="date" placeholder="开始日期" format="yyyy 年 MM 月 dd 日 00 时 00 分 00 秒"
          value-format="yyyy-MM-dd 00:00:00">
        </el-date-picker>
      </div>

      <div class="block">
        <span class="demonstration">结束时间</span>
        <div class="demonstration">值：{{ value2 }}</div>
        <el-date-picker v-model="value2" type="date" placeholder="结束日期" format="yyyy 年 MM 月 dd 日 23 时 59 分 59 秒"
          value-format="yyyy-MM-dd 23:59:59">
        </el-date-picker>
      </div> -->
      <el-form :rules="rules" label-width="9rem">
        <el-form-item label="开始时间:" prop="value1">
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="value2">
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm1()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- 对话框 -->

</template>

<script>

import { getRecordList, anzufenpeiliangbiao, getUserList } from "@/api/mentalTest/records";
export default {
  data () {
    return {
      value1: '',
      value2: '',
      // 对话框
      dialogVisible: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 100000,
        scaleId: null,
        scaleTitle: null,
        userId: null,
        loginName: null,
        userName: null,
        countScore: null,
        factorScore: null,
        resultContent: null,
        factorResult: null,
        userAnswer: null,
        classesName: null,
        deptName: null
      },
      // 获取的数据
      tableData: [],
      tableData1: [],
      // 选择框数据
      multipleSelection: [],
      total: 0,
      shuru: {
        scalecombinationid: null,
        userId: [],
        allocate: {
          answerTime: "",
          startTime: "",
          endTime: "",
          answeringStatus: "",
          testType: "",
          retest: "",
          retestInterval: 0,
          notification: "",
          notificationType: "",
          report: ""
        }
      },
      ruleForm: {
        testType: '',
        retest: '',
        notification: '',//是否发送通知
        report: '',//报告
        answerTime: ''//时间
      },
      rules: {
        testType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        retest: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        notification: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        report: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        answerTime: [
          { required: true, message: '请选择', trigger: 'change' }
        ],

      }
    }
  },
  created () {
    // 接受上个页面的数据
    this.row = this.$route.query.row;
    this.getList();

  },
  methods: {
    submitForm1 () {

      // 将表单数据赋给 shuru 对象

      this.shuru.allocate = this.ruleForm;
      this.shuru.scalecombinationid = this.row.id;
      // 将用户选择的数据添加到 shuru 对象中
      this.shuru.userId = this.multipleSelection.map(item => item.userId);
      this.shuru.allocate.startTime = this.value1
      this.shuru.allocate.endTime = this.value2
      anzufenpeiliangbiao(this.shuru).then(response => {
        this.$modal.msgSuccess("分配成功");
        this.getList();
      });
      this.dialogVisible = false


    },
    submitForm (ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {

          if (this.ruleForm.answerTime == "是") {
            this.dialogVisible = true
          }
          else {

            // 将表单数据赋给 shuru 对象
            this.shuru.allocate = this.ruleForm;
            this.shuru.scalecombinationid = this.row.id;
            // 将用户选择的数据添加到 shuru 对象中
            this.shuru.userId = this.multipleSelection.map(item => item.userId);
            this.shuru.allocate.startTime = null
            this.shuru.allocate.endTime = null
            anzufenpeiliangbiao(this.shuru).then(response => {
              this.$modal.msgSuccess("分配成功");
              this.getList();
            });
          }





        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 查看按钮的业务
    handleClick (row) {

    },
    handleSizeChange (pageSize) {

      this.queryParams.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange (currentPage) {

      this.queryParams.pageNum = currentPage;
      this.getList();
    },
    getList () {
      getUserList(this.queryParams).then(response => {
        this.total = response.total;
        this.tableData = response.rows
      });
      getRecordList(this.queryParams).then(response => {
        this.tableData1 = response.rows
        console.log(this.tableData1);
      });

    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    indexMethod (index) {
      return index + (this.queryParams.pageNum - 1) * 10 + 1;
    }
  }
}
</script>

<style scoped>
.body {

  margin-right: 40px;
  /* 右边距为20像素 */
  margin-left: 40px;
  /* 左边距为5像素 */
}
</style>